<template>
    <div class="content-container" direction="vertical">
        <el-container class="content-row">
            <el-button type="primary" @click="addCategory">添加分类</el-button>
        </el-container>
        <div>
            <el-table :data="categoryList" tooltip-effect="dark" style="width:700px" :header-cell-style="{'text-align':'center'}"  
            :cell-style="{'text-align':'center'}">
              <el-table-column label="分类ID" width="100" prop="id"></el-table-column>
              <el-table-column label="分类名称" width="100" prop="name"></el-table-column>
              <el-table-column label="分类负责人" width="300" prop="manager"></el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="danger" size="mini" @click="deleteCategory(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            categoryList: [
                {id: 1231,name: '男装',manager: '管理员用户01'},
                {id: 1232,name: '女装',manager: '管理员用户01'},
                {id: 1233,name: '帽子',manager: '管理员用户01'}
            ]
        }
    },
    methods: {
        deleteCategory(index){
            this.categoryList.splice(index,1)
        },
        addCategory() {
            this.$prompt('请输入分类名','新增分类',{
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(({value}) => {
                this.categoryList.push({
                    id: 1234,
                    name: value,
                    manager: '管理员用户01'
                })
            })
        }
    }
}
</script>